<template>
  <div>
    <home v-if="active === 'home'" />
    <!-- <recruit v-else-if="active === 'recruit'" /> -->
    <about v-else-if="active === 'about'" />
    <me v-else-if="active === 'me'" />

    <ze-tabbar :active="active" :items="tabs" @change="onChange" />
  </div>
</template>

<script>
import Home from './tabs/home/index.vue'
// import Recruit from './tabs/recruit/index.vue'
import About from './tabs/about/index.vue'
import Me from './tabs/me/index.vue'
import { tabItems } from './config'
import ZeTabbar from '@/components/ze-tabbar/index.vue'
import { CHANGE_GUEST_TAB, emitter } from '@/utils/emitter'

export default {
  components: {
    ZeTabbar,
    Home,
    About,
    Me,
  },
  data() {
    return {
      active: 'home',
      tabs: tabItems,
    }
  },
  mounted() {
    emitter.on(CHANGE_GUEST_TAB, (name) => {
      if (this.tabs.map(item => item.name).includes(name)) {
        this.active = name
      }
    })
  },
  beforeDestroy() {
    emitter.off(CHANGE_GUEST_TAB)
  },
  methods: {
    onChange(name) {
      this.active = name
    },
  },
}
</script>

<style lang="scss" scoped>

</style>
